<template>
    <!-- 分析指标一级页面  首页-->
  <div style="background-color:#fff">
    <a-radio-group default-value="a" button-style="solid" style="margin-left: 15px;padding: 10px 0" @change="handlechangeRadio">
      <a-radio-button value="a"> 图表 </a-radio-button>
      <a-radio-button value="b"> 表格 </a-radio-button>
    </a-radio-group>
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" style="padding-top:0px" v-show="openingIndexType">
      <a-row :gutter="24" type="flex" style="background-color:#F0F2F5;">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="开通" :style="{ height: '100%' }">
            <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" v-model="ktselectTime" @change="ktonChange" class="rangePicker" />
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" >
              <a-tab-pane tab="快开、查勘、快建、合同签订" key="1">          
                <!-- //快开 -->
                <FastOpenChart  v-bind:startTime="startTime+' 00:00:00'" v-bind:endTime="endTime+' 23:59:59'"></FastOpenChart>              
                <!-- //查勘 -->
                <SurveyChart  v-bind:startTime="startTime+' 00:00:00'" v-bind:endTime="endTime+' 23:59:59'"></SurveyChart>
                <!-- //快建 -->
                <FastBuildChart  v-bind:startTime="startTime+' 00:00:00'" v-bind:endTime="endTime+' 23:59:59'"></FastBuildChart>
                <!-- //合同 --> 
                <ContractChart  v-bind:startTime="startTime+' 00:00:00'" v-bind:endTime="endTime+' 23:59:59'"></ContractChart>
              </a-tab-pane>
            </a-tabs>
          </a-card>

        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <!-- 维护 -->
          <a-card :loading="loading" :bordered="false" title="故障" :style="{ height: '100%' }">
            <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" v-model="gzselectTime" @change="gzonChange" class="rangePicker" />
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" @change="callbacktwo">         
              <a-tab-pane tab="故障、投诉、满意度" key="1">
                <a-row>
                  <a-col :span="12">
                    <div style=";float:left">
                      <div>基准/挑战：96/99</div>
                    </div>
                  </a-col>
                  <a-col :span="2"></a-col>
                  <a-col :span="10">
                    <span class="weidabiao1">挑战</span>
                    <div class="weidabiao1-color"></div>
                    <span class="weidabiao1">未达标</span>
                    <div class="weidabiao2-color"></div>
                    <span class="weidabiao1">基准</span>
                    <div class="weidabiao3-color"></div>
                  </a-col>
                </a-row>
                <!-- //故障处理及时率 -->
                <div id="faultChartTime"></div>
                <a-row>
                  <a-col :span="12">
                    <div style=";float:left">
                      <div>基准/挑战：95/98</div>
                    </div>
                  </a-col>
                  <a-col :span="2"></a-col>

                </a-row>
                <!-- //政企投诉满意度 -->
                <div id="complaintChartTime"></div>
                <a-row>
                  <a-col :span="12">
                    <div style=";float:left">
                      <div>基准/挑战：95/98</div>
                    </div>
                  </a-col>
                  <a-col :span="2"></a-col>
                </a-row>
                <div id="satisfactionChartTime"></div>
              </a-tab-pane>

            </a-tabs>
          </a-card>
        </a-col>
      </a-row>
    </div>
    
    <!-- 企宽 专项模块 -->
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" v-show="openingIndexType">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :bordered="false" title="企宽" :style="{ height: '100%' }">
            <a-tabs @change="qkChartCallback" default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
              <a-tab-pane tab="企宽在途" key="1">
                <OneLevelWayChart v-if="qkshowa"></OneLevelWayChart>
              </a-tab-pane>
              <a-tab-pane tab="企宽装机" key="2">
                <OneLevelInstallEquipmentChart v-if="qkshowb"></OneLevelInstallEquipmentChart>
              </a-tab-pane>
              <a-tab-pane tab="企宽投诉" key="3">
                <OneLevelComplaintChart v-if="qkshowc"></OneLevelComplaintChart>
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="专项" :style="{ height: '100%' }">
           
          
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- ------------------------表格数据---------------------- -->
    <div v-show="!openingIndexType">
      <a-tabs tab-position="left" style="margin-top:10px" @change="callBack">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="android" />
            开通列表
          </span>
          <!-- 开通表格1 -->
          <OneLevelOpenTable v-if="openingIndexTypeExporta"></OneLevelOpenTable>
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="android" />
            故障列表
          </span>
          <!-- 故障表格2-->
          <OneLevelFaultTable></OneLevelFaultTable>
        </a-tab-pane>
        <a-tab-pane key="3">
          <span slot="tab">
            <a-icon type="android" />
            企宽在途
          </span>
          <!-- 企宽在途 -->
          <OneLevelWayTable></OneLevelWayTable>
        </a-tab-pane>
        <a-tab-pane key="4">
          <span slot="tab">
            <a-icon type="android" />
            企宽装机
          </span>
          <OneLevelInstallEquipmentTable></OneLevelInstallEquipmentTable>
        </a-tab-pane>
        <a-tab-pane key="5">
          <span slot="tab">
            <a-icon type="android" />
            企宽投诉
          </span>
          <OneLevelComplaintTable></OneLevelComplaintTable>
        </a-tab-pane>
      </a-tabs>
    </div>

   
  </div>
</template>

<script>
import moment from 'moment'
import OneLevelWayTable from '@/views/analysisManage/enterpriseWide/oneLevelTable/oneLevelWayTable'
import OneLevelInstallEquipmentTable from '@/views/analysisManage/enterpriseWide/oneLevelTable/oneLevelInstallEquipmentTable'
import OneLevelComplaintTable from '@/views/analysisManage/enterpriseWide/oneLevelTable/oneLevelComplaintTable'
import OneLevelFaultTable from '@/views/analysisManage/breakdown/oneLevelTable/oneLevelFaultTable'
import OneLevelOpenTable from '@/views/analysisManage/opening/oneLevelTable/oneLevelOpenTable'
import OneLevelWayChart from '@/views/analysisManage/enterpriseWide/oneLevelChart/oneLevelWayChart'
import OneLevelInstallEquipmentChart from '@/views/analysisManage/enterpriseWide/oneLevelChart/oneLevelInstallEquipmentChart'
import OneLevelComplaintChart from '@/views/analysisManage/enterpriseWide/oneLevelChart/oneLevelComplaintChart'
import FastOpenChart from '@/views/analysisManage/opening/oneLevelChart/fastOpenChart'
import ContractChart from '@/views/analysisManage/opening/oneLevelChart/contractChart'
import FastBuildChart from '@/views/analysisManage/opening/oneLevelChart/fastBuildChart'
import SurveyChart from '@/views/analysisManage/opening/oneLevelChart/surveyChart'
import { baseMixin } from '@/store/app-mixin'
import { Column } from '@antv/g2plot'
const DataSet = require('@antv/data-set')
import { getNowTime, getNowFormatDate } from '@/utils/util'
import {
  getKK,
  getCK,
  getJS,
  getDDD,
  getAllInfo,
  exportExcelhome,
  getProblemFirst,
  exportExcelFirst,
} from '@/api/public'
const data = []
const whdata = []
const otherdata = []
export default {
  name: 'Analysis',
  mixins: [baseMixin],
  components: {
    OneLevelOpenTable,
    OneLevelWayTable,
    OneLevelInstallEquipmentTable,
    OneLevelComplaintTable,
    OneLevelFaultTable,
    OneLevelWayChart,
    OneLevelInstallEquipmentChart,
    OneLevelComplaintChart,
    FastOpenChart,ContractChart,FastBuildChart,SurveyChart
  },
  data() {
    return {
      qkshowa: true,
      qkshowb: false,
      qkshowc: false,
      dateFormat: 'YYYY-MM-DD',
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
      tableType: 'a',
      tableLoading: false,
      openingIndexTypeExporta: false,
      openingIndexTypeExportb: true,
      openingIndexTypeExportc: true,
      openingIndexTypeExportd: true,
      openingIndexTypeExporte: true,
      dataSouceFenXi: [], //开通分析导出
      dataSouceFenXiExport: [], //维护分析导出
      openingIndexType: true,
      ktselectTime: '',
      gzselectTime: '',
      startTime: '',
      endTime: '',
      // whstartTime: '',
      // whendTime: '',
      gzstartTime: '',
      gzendTime: '',
      infoData: {},
      kkShow: false,
      qkShow: false,
      ckShow: false,
      jsShow: false,
      openChartTimePlot: '',
      surveyChartTimePlots: '',
      buildChartTimePlots: '',
      faultPlot: '',
      complaintPlot: '',
      satisfactionPlot: '',
      ictploat: '',
      loading: false,
      type: 1,
      qikuan: 1,
      manyi: 1,
      tousu: 1,
      data,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1,
      },
      kkData: [],
      ckData: [],
      kjData: [],
    }
  },
  created() {
    let arr = getNowTime()
    this.startTime = arr[0]
    this.endTime = arr[1]
    this.gzstartTime = getNowFormatDate()
    this.gzendTime = getNowFormatDate()
    this.ktselectTime = [moment(this.startTime), moment(this.endTime)]
    this.gzselectTime = [moment(this.gzstartTime), moment(this.gzendTime)]
    let data = []
    this.$nextTick(() => { 
      this.faultChartInit(data)
      this.satisfactionChartInit(data)
      this.complaintChartInit(data)
    })
  },
  mounted() {
    this.getProblemFirstFunction()
  },
  methods: {
    callBack(){},
    // 图表  表格 切换
    handlechangeRadio(e) {
      e.target.value == 'a' ? this.getAllChartInfo() : this.getAllTableInfo()
      this.openingIndexType = !this.openingIndexType
    },
    getAllChartInfo() {
      this.openingIndexTypeExporta = false
    },
    //表格数据 显示回单数据
    getAllTableInfo() {
      this.openingIndexTypeExporta = true
    },
    //表格快开取消
    cancelEvent() {
      this.kkShow = false
      this.jsShow = false
      this.ckShow = false
      this.qkShow = false
    },
    moment,
  
    //维护数据getProblemFirst
    getProblemFirstFunction() {
      let startTime = this.gzstartTime + ' 00:00:00'
      let endTime = this.gzendTime + ' 23:59:59'
      getProblemFirst(startTime, endTime).then((response) => {
        let first = response.data
        first.forEach((item, index) => {
          first[index].type = first[index].area
          // 专线及时率 投诉及时率 满意度
          first[index].specialLine = Math.abs(this.toPoint(first[index].specialLine) * 100)
          first[index].zqComplain = Math.abs(this.toPoint(first[index].zqComplain) * 100)
          first[index].zqSatisfaction = Math.abs(this.toPoint(first[index].zqSatisfaction) * 100)
        })
        this.faultPlot.changeData(first)
        this.complaintPlot.changeData(first)
        this.satisfactionPlot.changeData(first)
      })
    },
    // 点击维护查看表格
    getProblemTable() {
      this.tableLoading = true
      let startTime = this.gzstartTime + ' 00:00:00'
      let endTime = this.gzendTime + ' 23:59:59'
      getProblemFirst(startTime, endTime).then((response) => {
        this.dataSouceFenXiExport = response.data
        this.tableLoading = false
      })
    },
    //故障
    faultChartInit(openData) {
      this.faultPlot = new Column(document.getElementById('faultChartTime'), {
        data: openData,
        xField: 'type',
        yField: 'specialLine',
        label: {},
        height: 200,
        forceFit: true,
        //柱状图颜色区分
        colorField: 'specialLine',
        color: (d) => {
          if (d < 96) {
            return '#E5703E'
          } else if (d >= 96 && d < 99) {
            return '#5687F4'
          } else {
            return '#5DCE3C'
          }
        },
        legend: {
          visible: false,
        },
        meta: {
          type: {
            alias: '故障处理',
          },
          specialLine: {
            alias: '及时率',
          },
        },
        events: {
          onColumnClick: (e) => {
            // let infoData = {}
            // infoData.area = e.data.area
            // this.infoData = infoData
            // this.kkShow = true
          },
        },
      })
      this.faultPlot.render()
    },
    //投诉
    complaintChartInit(openData) {
      this.complaintPlot = new Column(document.getElementById('complaintChartTime'), {
        data: openData,
        xField: 'type',
        yField: 'zqComplain',
        label: {},
        height: 200,
        forceFit: true,
        //柱状图颜色区分
        colorField: 'zqComplain',
        color: (d) => {
          if (d < 95) {
            return '#E5703E'
          } else if (d >= 95 && d < 98) {
            return '#5687F4'
          } else {
            return '#5DCE3C'
          }
        },
        legend: {
          visible: false,
        },
        meta: {
          type: {
            alias: '投诉处理',
          },
          zqComplain: {
            alias: '及时率',
          },
        },
        events: {
          onColumnClick: (e) => {
            // let infoData = {}
            // infoData.area = e.data.area
            // this.infoData = infoData
            // this.kkShow = true
          },
        },
      })
      this.complaintPlot.render()
    },

    //满意度
    satisfactionChartInit(openData) {
      this.satisfactionPlot = new Column(document.getElementById('satisfactionChartTime'), {
        data: openData,
        xField: 'type',
        yField: 'zqSatisfaction',
        label: {},
        height: 200,
        forceFit: true,
        //柱状图颜色区分
        colorField: 'zqSatisfaction',
        color: (d) => {
          if (d < 95) {
            return '#E5703E'
          } else if (d >= 95 && d < 98) {
            return '#5687F4'
          } else {
            return '#5DCE3C'
          }
        },
        legend: {
          visible: false,
        },
        meta: {
          type: {
            alias: '政企投诉满意度',
          },
          zqSatisfaction: {
            alias: '满意度',
          },
        },
        events: {
          onColumnClick: (e) => {
            // let infoData = {}
            // infoData.area = e.data.area
            // this.infoData = infoData
            // this.kkShow = true
          },
        },
      })
      this.satisfactionPlot.render()
    },
    //转小数
    toPoint(percent) {
      var str = percent.replace('%', '')
      str = str / 100
      return str
    },
    //转百分数
    toPercent(point) {
      var str = Number(point * 100).toFixed(1)
      str += '%'
      return str
    },
    qkChartCallback(key) {
      switch (key) {
        case '1':
          this.qkshowa = true
          this.qkshowb = false
          this.qkshowc = false
          break
        case '2':
          this.qkshowa = false
          this.qkshowb = true
          this.qkshowc = false
          break
        case '3':
          this.qkshowa = false
          this.qkshowb = false
          this.qkshowc = true
          break

        default:
          this.qkshowa = true
          this.qkshowb = false
          this.qkshowc = false
      }
    },
    callbacktwo(key) {
      if (key == 1) {
        // this.initqikuan()
      } else if (key == 2) {
        if (this.tousu == 1) {
          setTimeout(() => {
            this.inittousu()
            this.tousu = 2
          }, 200)
        }
      } else if (key == 3) {
        if (this.manyi == 1) {
          setTimeout(() => {
            this.initmanyicanvas()
            this.manyi = 2
          }, 200)
        }
      }
    },
    //开通模块时间选择
    ktonChange(date, dateString) {
      this.startTime = dateString[0]
      this.endTime = dateString[1] 
    },
    //故障模块时间选择
    gzonChange(date, dateString) {
      this.gzstartTime = dateString[0]
      this.gzendTime = dateString[1]
      this.getProblemFirstFunction()
    },
  },
}
</script>
<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.fk1 {
  width: 12px;
  height: 12px;
}
.fkcompany {
  font-size: 12px;
  font-weight: 500;
  color: #3e3e3e;
  margin-left: 10px;
  margin-top: -2px;
}
.rangePicker {
  width: 300px;
  position: absolute;
  right: 10px;
  line-height: 56px;
  z-index: 11;
}
.weidabiao1 {
  float: right;
  font-size: 13px;
  font-weight: 500;
  color: #3e3e3e;
  // padding-top: 1px;
}

.weidabiao1-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5dce3c;
  float: right;
}
.weidabiao2-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #e5703e;
  float: right;
}
.weidabiao3-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5687f4;
  float: right;
}
</style>
